UFM: JavaScript-like Expressions#19685
Merged
iOvergaard merged 13 commits intomainfrom Jul 9, 2025
Merged
Conversation
to under "extensions"
making use of "@heximal/expressions" library.
Merged
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
# Conflicts: # src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/manifests.ts # src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/types.ts
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
Contributor
There was a problem hiding this comment.
Pull Request Overview
Adds JavaScript-like ${…} expression support to Umbraco Flavored Markdown (UFM) by integrating the Heximal Expressions library, providing a marked extension for inline parsing, and a LitElement to evaluate and render expressions with filters.
- Configure TypeScript path mapping and
package.jsonto include@heximal/expressions. - Register a new
ufmjsmarked extension and expose it via manifest. - Introduce
umb-ufm-js-expressioncomponent and extendUfmContextto supply filters.
Reviewed Changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Umbraco.Web.UI.Client/tsconfig.json | Add path mapping for heximal-expressions |
| src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/ufmjs-marked-extension.api.ts | Implement inline marked extension for ${} tokens |
| src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/types.ts | Export new marked extension API type |
| src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/manifests.ts | Register the UFM JS marked extension manifest |
| src/Umbraco.Web.UI.Client/src/packages/ufm/contexts/ufm.context.ts | Add getFilters() method to retrieve all filters |
| src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-js-expression.element.ts | Define umb-ufm-js-expression element for parsing & rendering expressions |
| src/Umbraco.Web.UI.Client/src/packages/ufm/components/index.ts | Export the new umb-ufm-js-expression component |
| src/Umbraco.Web.UI.Client/src/external/heximal-expressions/index.ts | Re-export the heximal expressions package |
| src/Umbraco.Web.UI.Client/package.json | Add @heximal/expressions dependency and map external path |
Files not reviewed (1)
- src/Umbraco.Web.UI.Client/package-lock.json: Language not supported
Comments suppressed due to low confidence (3)
src/Umbraco.Web.UI.Client/src/packages/ufm/extensions/ufmjs-marked-extension.api.ts:5
- [nitpick] Consider using
UmbUfmJsMarkedExtensionApi(capitalizing theJSacronym) for consistency with other code elements (umb-ufm-js-expression, etc.) and improved readability.
export class UmbUfmjsMarkedExtensionApi implements UmbMarkedExtensionApi {
src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-js-expression.element.ts:36
- New expression parsing and evaluation logic isn’t covered by unit tests. Add tests for valid expressions, edge cases (syntax errors), caching behavior, and filter application to ensure correctness.
#labelTemplate(expression: string, model?: any): string {
src/Umbraco.Web.UI.Client/src/packages/ufm/contexts/ufm.context.ts:68
- [nitpick] Consider adding a JSDoc comment explaining that this method returns a map of filter aliases to their functions, and noting any expected structure of the returned object.
public getFilters() {
for consistency and improved readability.
making it simpler to add unit-tests.
added JSDocs for public methods
iOvergaard
approved these changes
Jul 9, 2025
Contributor
iOvergaard
left a comment
iOvergaard
left a comment
There was a problem hiding this comment.
Tested with different logical expressions ✅
Tested echoing deep values ✅
Tested registering my own markedExtension that preprocesses the HTML first (probably more related to the previous PR), and UFM still works ✅
Caching works (but hard to stress test it) ✅
This was referenced Sep 8, 2025
Closed
This was referenced Oct 20, 2025
This was referenced Oct 27, 2025
This was referenced Mar 11, 2026
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds support for JavaScript-like expressions to UFM.
Using a syntax similar to JavaScript's Template literals, expressions are delimited by a dollar sign and curly braces:
${expression}.The implementation makes use of the Heximal Expressions library (source). The syntax should feel familiar to AngularJS expressions, with piped filters/transformers.
How to test?
Go to a document that can make use of UFM-syntax/label-templates, e.g. a block list item or a property's description.
Try adding syntax for various scenarios, for example...
${ propertyAlias }${ propertyAlias.length }${ propertyAlias.length > 0 ? "Yes" : "No" }${ propertyAlias | uppercase }